<!-- 主界面 -->
<div class="main">
	
	<!-- 工具栏 -->
	<div class="toolbar">
		<!-- 左侧按钮 -->
		### maxmin:true 配置显示最大化最小化按钮
		### 改为使用打开独立新页面，不再使用 open 交互 open="{maxmin:true, area:'960px', offset:'15px'}"
		<button open="{area:'600px', offset:'139px'}" url="/admin/menu/add" class="btn btn-success btn-sm mr-1">
			<i class="fa fa-plus mr-1"></i>创建
		</button>
	</div>
	
	<!-- 表格容器 -->
	<div id="table-box" class="table-box">
		<table class="table table-hover" id="menu-table" >
		</table>
	</div>
	
</div>
<link href="/assets/lib/jquery-treegrid/css/jquery.treegrid.css" rel="stylesheet">
<link href="/assets/lib/bootstrap-table/themes/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
<script src="/assets/lib/jquery-treegrid/js/jquery.treegrid.min.js"></script>
<script src="/assets/lib/bootstrap-table/bootstrap-table.min.js"></script>
<script src="/assets/lib/bootstrap-table/extensions/treegrid/bootstrap-table-treegrid.min.js"></script>
<style>
.operation {
    text-align: right;
    color: #20a53a;
    font-size: 13px;
}
</style>
<script type="text/javascript">
  var $table = $('#menu-table')
  function deleteCallback(res){
      // console.log("删除结果",res);
       $table .bootstrapTable('refresh');
  }
  $(function() {
    $table.bootstrapTable({
      url: '/admin/menu/findAll',
      idField: 'id',
      showColumns: false,
      columns: [
        {
          field: 'ck',
          checkbox: true
        },
        {
          field: 'name',
          title: '菜单名称'
        },
        {
          field: 'linkAddr',
          title: '网址',
          align: 'center'
        },
        {
          field: 'target',
          title: '打开方式',
          align: 'center',
          formatter:targetFormatter
        },
        {
          field: 'weight',
          title: '展示顺序'
        },
        {
          field: 'op',
          title: '操作',
          class: 'operation',
          formatter: operationFormatter
        }
      ],
      treeShowField: 'name',
      parentIdField: 'pid',
      onPostBody: function() {
        var columns = $table.bootstrapTable('getOptions').columns
        if (columns && columns[0][1].visible) {
          $table.treegrid({
            treeColumn: 1,
            onChange: function() {
              $table.bootstrapTable('resetView')
            }
          })
        }
      }
    })
    //格式化
    function operationFormatter(value, row, index){
	    var op='<a open="{area:\'600px\', offset:\'139px\'}" url="/admin/menu/edit?id='+row.id+'">修改</a> | ';
	    op+='<a confirm="确定删除'+row.name+'？" callback="deleteCallback" url="/admin/menu/delete?id='+row.id+'">删除</a>';
	    return op;
    }
    function targetFormatter(value, row, index){
        if(value === "_self"){
           return "当前页";
        }else{
           return "新窗口";
        }
    }
  })

</script>


